<template>
  <div class="general">
    <TopNav />
    <div class="block">
      <div class="date">
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="(value) => changeHandler(value)" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
    </div>
    <div class="list">
      <h3>整体概况</h3>
      <div class="list_car">
        <el-card class="box-card" v-for="(item,index) in carlist" :key="index">
          <h1>{{item.num}}<span>{{item.unit}}</span></h1>
          <p>{{item.name}}</p>
        </el-card>
      </div>
    </div>
  </div>


</template>
<style>
  .general .list_car::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    clear: both;
  }

  .general .box-card .el-card__body {
    padding: 0;
    padding: 23px 0 0 44px;
  }

  .general .box-card .el-card__body h1 {
    text-align: left;
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    color: #111111;
    line-height: inherit;
    text-shadow: none;
  }

  .general .box-card .el-card__body h1 span {
    font-size: 18px;
  }

  .general .box-card .el-card__body p {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #111111;
    line-height: inherit;
    text-shadow: none;
  }

  .general .el-card {
    width: 294px;
    height: 138px;
    float: left;
    background: url(../assets/img/grade.png) no-repeat;
    margin-right: 32px;
  }

  .general .el-card:nth-child(2) {
    background: url(../assets/img/class.png) no-repeat;
  }

  .general .el-card:nth-child(3) {
    background: url(../assets/img/discipline.png) no-repeat;
  }

  .general .el-card:nth-child(4) {
    background: url(../assets/img/teacher.png) no-repeat;
  }

  .general .el-card:nth-child(5) {
    background: url(../assets/img/student.png) no-repeat;
  }

  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    box-shadow: none;
    border: 0;
  }
</style>
<script>
  import TopNav from './TopNav.vue'
  export default {
    name: 'index',
    components: {
      TopNav
    },
    data() {
      return {
        value1: '',
        carlist: [{
            num: '1',
            unit: '个',
            name: '年级数量'
          },
          {
            num: '1',
            unit: '个',
            name: '班级数量'
          },
          {
            num: '1',
            unit: '个',
            name: '学科数量'
          },
          {
            num: '1',
            unit: '个',
            name: '老师数量'
          },
          {
            num: '1',
            unit: '个',
            name: '学生数量'
          },
        ],
      }
    },
    mounted() {
      let token = sessionStorage.getItem("token");
      let carlist = this.carlist;

      this.axios({
        method: 'post',
        data: {
          token: token,
        },
        url: this.$api + '/index/index/survey'
      }).then(function(res) {
        carlist[0].num=res.data.data.niannum 
        carlist[1].num=res.data.data.bannum  
        carlist[2].num=res.data.data.classnum 
        carlist[3].num=res.data.data.usernum 
        carlist[4].num=res.data.data.studentnum
      });
    },
    methods: {
      changeHandler(value) {
        console.log(value[0])
        console.log(value[1])
      }
    }

  }
</script>
